<template>
  <view>

    <view class="item" style="flex-direction: column;align-items: flex-end;" v-if="dataBean.approveStatusStr">
      <text
          style="color: #FFC000;font-size: 30rpx;margin: 20rpx 20rpx 10rpx 0;">
        {{ dataBean.approveStatusStr|filterNull }}
      </text>
      <text v-if="dataBean.approveStatusRemark"
            style="color: #FF623D;font-size: 26rpx;margin: 0 20rpx 10rpx 0;">
        {{ dataBean.approveStatusRemark|filterNull }}
      </text>
    </view>

    <remind-carinfo :dataBean="dataBean"></remind-carinfo>

    <view class="item">

      <view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
        <u-icon name="order" color="#1573FF" label="维修信息" label-color="#333333"
                :customStyle="{'line-height': '80rpx',}">
        </u-icon>

        <text
            style="line-height: 80rpx; color: #E93131;">
          {{ dataBean.carRepair ? dataBean.carRepair.repairStatusShow : '' | filterNull }}
        </text>
      </view>


      <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

      <view v-if="dataBean.carRepair != null">
        <view class="text-line">
          <text class="text-name">维修厂名称:</text>
          <text class="text-value">{{ dataBean.carRepair.serviceName|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修开始时间:</text>
          <text class="text-value">{{ dataBean.carRepair.repairStartDate|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修结束时间:</text>
          <text class="text-value">{{ dataBean.carRepair.repairEndDate|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">车辆公里数:</text>
          <text class="text-value">{{ dataBean.carRepair.carMileage|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">故障描述:</text>
          <text class="text-value">{{ dataBean.carRepair.faultDesc|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修厂报价:</text>
          <text class="text-value">￥{{ dataBean.carRepair.repairShopQuotation|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修内容:</text>
          <text class="text-value">{{ dataBean.carRepair.repairContent|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">司机电话:</text>
          <text class="text-value">{{ dataBean.carRepair.driverPhone|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">是否已结算:</text>
          <text class="text-value" v-if="dataBean.carRepair.costSettlementName == 1">否</text>
          <text class="text-value" v-else-if="dataBean.carRepair.costSettlementName == 2">是</text>
          <text class="text-value" v-else>{{ filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修相关费用信息</text>
        </view>

        <u-collapse v-if="dataBean.carRepair.relatedCostsList.length > 0">
          <u-collapse-item v-for="(item,index) in dataBean.carRepair.relatedCostsList"
                           :title="`维修相关费用信息${index}`" name="Numerous tools">
            <collapse-detail v-model="dataBean.carRepair.relatedCostsList[index]" />
          </u-collapse-item>
        </u-collapse>

        <view class="text-line">
          <text class="text-name">维修反馈意见:</text>
          <text class="text-value">{{ dataBean.carRepair.repairFeedback|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修是否提供备用车:</text>
          <text class="text-value" v-if="dataBean.carRepair.isSpareCarShow == 1">是</text>
          <text class="text-value" v-else-if="dataBean.carRepair.isSpareCarShow == 2">否</text>
          <text class="text-value" v-else>{{ filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">备用车牌号:</text>
          <text class="text-value">{{ dataBean.carRepair.spareCarNo|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">备注:</text>
          <text class="text-value">{{ dataBean.carRepair.remark|filterNull }}</text>
        </view>

        <!--				<view class="text-line">-->
        <!--					<text class="text-name">维修价格用户支付金额:</text>-->
        <!--					<text class="text-value">￥{{dataBean.carRepair.userPay|filterNull}}</text>-->
        <!--				</view>-->

        <!--				<view class="text-line">-->
        <!--					<text class="text-name">维修价格平台支付金额:</text>-->
        <!--					<text class="text-value">￥{{dataBean.carRepair.platformPay|filterNull}}</text>-->
        <!--				</view>-->

        <!--				<view class="text-line">-->
        <!--					<text class="text-name">维修价格保险支付金额:</text>-->
        <!--					<text class="text-value">￥{{dataBean.carRepair.insurancePay|filterNull}}</text>-->
        <!--				</view>-->
        <!--				<view class="text-line">-->
        <!--					<text class="text-name">总金额:</text>-->
        <!--					<text class="text-value">￥{{totalMoney}}</text>-->
        <!--				</view>-->
        <!--				<view class="text-line">-->
        <!--					<text class="text-name">是否提供备用车:</text>-->
        <!--					<text class="text-value">{{dataBean.carRepair.spareCarShow|filterNull}}</text>-->
        <!--				</view>-->


        <u-form v-if="'myexam'==pageType" style="padding: 0 20rpx" :model="dataBean.carRepair" ref="uform"
                label-width="auto">
          <u-form-item label="维修结束时间" @click="pickerShow(3)" borderBottom>
            <u-input v-model="dataBean.carRepair.repairEndDate" disabled disabledColor="#ffffff" border="none"
                     inputAlign="right" placeholder="请选择结束时间" type="select" :select-open="actionSheetShow">
            </u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>

          <u-form-item label="是否已结算" @click="pickerShow(4)" borderBottom>
            <u-input v-model="dataBean.carRepair.costSettlementShow" disabled disabledColor="#ffffff" border="none"
                     inputAlign="right" placeholder="请选择是或否" type="select" :select-open="actionSheetShow">
            </u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>

          <u-form-item label="维修反馈意见">
            <u-input v-model="dataBean.carRepair.repairFeedback" border="none" inputAlign="right"
                     placeholder="请输入反馈意见">
            </u-input>
          </u-form-item>
        </u-form>

        <view v-else>
          <view class="text-line">
            <text class="text-name">维修结束时间:</text>
            <text class="text-value">{{ dataBean.carRepair.repairEndDate|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">是否已结算:</text>
            <text class="text-value">{{ dataBean.carRepair.costSettlementShow|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">维修反馈意见:</text>
            <text class="text-value">{{ dataBean.carRepair.repairFeedback|filterNull }}</text>
          </view>
        </view>

        <picPdf v-if="dataBean.carRepair.attachment && dataBean.carRepair.attachment.length>0"
                :attachment="dataBean.carRepair.attachment"></picPdf>

      </view>

      <no-data v-else content="暂无维修~"></no-data>

      <u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}"
              v-if="dataBean.repairButton">
      </u-line>

      <!-- 反馈信息 -->
      <view class="" v-if="dataBean.carRepair && dataBean.carRepair.repairStatus == 3">
        <!--				<view class="text-line" style="margin-top: 20rpx;">-->
        <!--					<text class="text-name">维修结束时间:</text>-->
        <!--					<text class="text-value">{{dataBean.carRepair.repairEndDate|filterNull}}</text>-->
        <!--				</view>-->

        <!--				<view class="text-line">-->
        <!--					<text class="text-name">是否已结算:</text>-->
        <!--					<text class="text-value">{{dataBean.carRepair.costSettlementShow|filterNull}}</text>-->
        <!--				</view>-->

        <!--				<view class="text-line">-->
        <!--					<text class="text-name">维修反馈意见:</text>-->
        <!--					<text class="text-value">{{dataBean.carRepair.repairFeedback|filterNull}}</text>-->
        <!--				</view>-->

        <!-- 反馈按钮 -->
        <view style="display: flex; flex-direction: column;" v-if="dataBean.feedbackButton">
          <u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}"></u-line>
          <view class="btn-detail" @click="goRepairFeeback">
            维修反馈
          </view>
        </view>

      </view>

      <view class="btn-detail" v-if="dataBean.repairButton" @click="goAddRepair">
        新增维修
      </view>

    </view>

    <examflow :from="pageType" :instanceId="instanceId" approvalName="carRepairApprove" :isAdd="false"></examflow>

    <view style="height: 100rpx;"></view>

    <view class="button-container" v-if="'myexam'==pageType">
      <button class="btn-item" v-if="dataBean.recallButton && bigType==3" @click="bottomClick(1)">撤回</button>
      <button class="btn-item" @click="bottomClick(2)">审核驳回</button>
      <button class="btn-item" @click="bottomClick(3)">审核通过</button>
    </view>

    <view class="button-container" v-else-if="dataBean.recallButton && bigType==3">
      <button class="btn-item" @click="bottomClick(1)">撤回</button>
    </view>

    <!-- 维修结束时间 -->
    <u-datetime-picker
        v-model="value2"
        :show="endTimeShow" mode="date" @confirm="timeconfirm" @cancel="endTimeShow=false">
    </u-datetime-picker>

    <!-- 是否已结算 -->
    <u-picker :show="settleShow" :columns="settleList" keyName="value" @confirm="pickerConfim"
              @cancel="settleShow=false"></u-picker>

  </view>


</template>

<script>
import remindCarinfo from '@/components/remind-carinfo.vue';
import examflow from '@/components/exam-flow.vue';
import picPdf from '@/components/pic-pdf.vue';
import collapseDetail from './collapseDetail.vue'
import {
  repair_handle
} from '@/common/http.api.js';

export default {
  components: {
    remindCarinfo,
    examflow,
    picPdf,
    collapseDetail
  },

  data() {
    return {
      totalMoney: 0,
      dataBean: {
        carRepair: {
          relatedCostsList: [
            {
              feeName: "22",
              receivableAmount: "22",
              receivableObjName: "22",
              receivedTime: "22",
              isGenerateReceivableBill: 0,
              payableAmount: "222",
              paymentObjName: "22",
              payTime: "22",
              isGeneratePayableBill: 0,
            }
          ]
        },
        vehicle: {},
        orderCar: {},
      },
      carId: '',
      repairId: '',
      instanceId: '',
      businessId: '',
      approveId: '',
      pageType: '',
      bigType: '',
      endTimeShow: false,
      settleShow: false,
      // value1:Number(new Date()),
      value2: Number(new Date()) + 30 * 24 * 3600 * 1000,
      settleList: [
        [{
          value: '是',
          code: 2
        },
          {
            value: '否',
            code: 1
          }
        ]
      ],
    }
  },
  watch: {
    'dataBean.carRepair': {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal)
        let singleMoney = Number(newVal.userPay || 0).add(Number(newVal.platformPay || 0)).add(Number(newVal.insurancePay || 0))
        let repairItemInfoList = newVal.repairItemInfoList || []
        let bothMoney = repairItemInfoList.reduce((total, num) => {
          return Number(num.itemMoney || 0).add(total);
        }, 0)
        this.totalMoney = singleMoney.add(bothMoney);
      },
      immediate: true
    },
  },
  methods: {
    pickerShow(type) {
      switch (type) {
        case 3:
          this.endTimeShow = true;
          this.mode = 'time';
          break
        case 4:
          this.settleShow = true;
          this.mode = 'selector';
          break
      }
    },
    timeconfirm(e) {

      let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');

      //结束时间
      this.endTimeShow = false;
      this.dataBean.carRepair.repairEndDate = timeStr;
    },
    pickerConfim(e) {
      this.settleShow = false;
      this.dataBean.carRepair.costSettlement = e.value[0].code
      this.dataBean.carRepair.costSettlementShow = e.value[0].value

    },
    //新增维修
    goAddRepair() {
      var vehicle = JSON.stringify(this.dataBean.vehicle);
      uni.navigateTo({
        url: './car-addReapir?vehicle=' + vehicle + '&pageType=add',
      })

    },
    //维修反馈
    goRepairFeeback() {
      uni.navigateTo({
        url: 'car-repairFeeback?repairId =' + this.repairId,
      })
    },

    bottomClick(type) {
      let that = this
      switch (type) {
        case 1: //撤回
          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=1&processKey=carRepairApprove&approveId=' + this
                .approveId + '&url=' + repair_handle
          })
          break;
        case 2: //审核驳回
          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=3&processKey=carRepairApprove&approveId=' + this
                .approveId + '&url=' + repair_handle
          })
          break;
        case 3: //审核通过
          getApp().globalData.fix_exam_bean = {
            repairEndDate: that.dataBean.carRepair.repairEndDate,
            costSettlement: that.dataBean.carRepair.costSettlement,
            repairFeedback: that.dataBean.carRepair.repairFeedback,
          }

          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=4&processKey=carRepairApprove&approveId=' + this
                .approveId + '&url=' + repair_handle
          })
          break;
      }

    },

    getData() {
      this.$u.api.repairDetail({
        carId: this.carId,
        businessId: this.businessId,
      }).then(
          res => {
            this.dataBean = res;
            this.dataBean.carRepair.relatedCostsList = res.relatedCostsList
            this.repairId = this.dataBean.carRepair != null ? this.dataBean.carRepair.id : '';
            if (res && res.carRepair && res.carRepair.instanceId) {
              this.instanceId = res.carRepair.instanceId
            }
          }
      );
    }

  },

  onShow() {
    this.getData()
  },

  onLoad(op) {

    this.carId = uni.$u.test.isEmpty(op.carId) ? '' : op.carId;
    this.instanceId = uni.$u.test.isEmpty(op.instanceId) ? '' : op.instanceId;
    this.businessId = uni.$u.test.isEmpty(op.businessId) ? '' : op.businessId;
    this.approveId = uni.$u.test.isEmpty(op.approveId) ? '' : op.approveId;
    this.pageType = uni.$u.test.isEmpty(op.pageType) ? '' : op.pageType;
    this.bigType = uni.$u.test.isEmpty(op.bigType) ? '' : op.bigType;
  }
}
</script>

<style lang="scss">
.btn-detail {
  width: 180rpx;
  height: 60rpx;
  border-radius: 50rpx;
  color: white;
  text-align: center;
  background-color: $blue15;
  font-size: 26rpx;
  line-height: 60rpx;
  align-self: flex-end;
  margin: 10rpx 20rpx 10rpx;
}

.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    width: 200rpx;
    height: 100rpx;
  }

  text {
    margin-top: 35rpx;
    margin-bottom: 60rpx;
    font-size: 24rpx;
    color: #C5D3E8;
  }
}

.u-form-item__body {
  padding: 10px !important;
}
</style>
